<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <title>气瓶信息查看</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="top">
    <img src="./img/loginLogo.png" alt="logo" height="50" id="img">
    <p class="header">气瓶安全信息化惠民管理平台</p>
</div>
<div class="title">
    <ul>
        <li><p>气瓶信息</p><img src="./img/button_1.jpg" alt=""></li>
        <li><p>充装信息</p><img src="./img/button_2.jpg" alt=""></li>
        <li><p>配送信息</p><img src="./img/button_3.jpg" alt=""></li>
    </ul>
</div>
<div class="content">
    <div class="item base">
        <ul>
            <li><i class="iconfont icon-dian"></i>气瓶条码：</li>
            <li><i class="iconfont icon-dian"></i>出厂编号：</li>
            <li><i class="iconfont icon-dian"></i>制造日期：</li>
            <li><i class="iconfont icon-dian"></i>下捡年月：</li>
            <li><i class="iconfont icon-dian"></i>报废日期：</li>
            <li><i class="iconfont icon-dian"></i>气瓶状态：</li>
            <li><i class="iconfont icon-dian"></i>气瓶种类：</li>
        </ul>
    </div>
    <div class="item fill">
        <ul>
            <li><i class="iconfont icon-dian"></i>充装工：</li>
            <li><i class="iconfont icon-dian"></i>充装单位：</li>
            <li><i class="iconfont icon-dian"></i>充装介质：</li>
            <li><i class="iconfont icon-dian"></i>充装重量：</li>
            <li><i class="iconfont icon-dian"></i>末次充装日期：</li>
        </ul>
    </div>
    <div class="item send">
        <ul>
            <li><i class="iconfont icon-dian"></i>客户名称：</li>
            <li><i class="iconfont icon-dian"></i>身份证号码：</li>
            <li><i class="iconfont icon-dian"></i>配送地址：</li>
            <li><i class="iconfont icon-dian"></i>配送工：</li>
            <li><i class="iconfont icon-dian"></i>配送日期：</li>
        </ul>
    </div>
    <div class="item safe on">
        <p class="safe_title">液化气规范使用安全常识</p>
        <ul class="safe_li">
            <li>1、按照国家有关规定配置消防设施和器材、安装可燃气体浓度报警装置。</li>
            <li>2、用户要经常检查液化石油气设备是否完好无损。</li>
            <li>3、液化气灶具在使用时应有人看管，防止火被风吹灭以及水、汤溢出将火浇灭。</li>
            <li>4、钢瓶位置不要靠近热源、胶管长度不要超过2米、同一房间内不得使用其它火源。</li>
            <li>5、胶管与调压阀安全使用期为18个月。连接调压阀时要拧牢，调压阀橡胶垫不能丢失，再用肥皂水涂于接口处试漏；如发现漏气，应重新拧接，直至不漏气方可使用。</li>
            <li>6、液化石油气的使用房间应注意通风换气，钢瓶严禁安置在密闭的空间之中。</li>
            <li>7、钢瓶必须直立使用，严禁横放或倒放使用；钢瓶严禁用火烤、开水烫或阳光下爆晒；严禁串气倒气、乱倒残液，否则遇到明火会立即引起燃烧或爆炸。</li>
            <li>8、使用完液化气后请务必关闭钢瓶阀门！</li>
        </ul>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./js/index.js"></script>
<script>
    window.onload = function () {
        var title = document.getElementsByClassName('title')[0]
        var lis = title.getElementsByTagName('li')
        var items = document.getElementsByClassName('item')
        var img = document.getElementById('img')

        img.onclick = function () {
            show(3, items)
        }

        for (var i = 0; i < lis.length; i++) {
            (function (j) {
                var li = lis[j]
                li.onclick = function () {
                    show(j, items)
                }
            })(i)
        }

        function show (index, arr) {
            for (var i = 0; i < arr.length; i++) {
                (function (j) {
                    var a = arr[j]
                    if (j === index) {
                        a.style.display = 'block'
                    } else {
                        a.style.display = 'none'
                    }
                })(i)
            }
        }
    }
</script>
</html>